<template>
  <div class="page-container">
    <el-card header="应用概况">
      <div class="business-box">
        <div class="business-item">
          <p class="p1">有效订单</p>
          <p class="p2"><span class="number">0</span>单</p>
          <p class="p3">昨日同时段0单</p>
        </div>
        <div class="business-item">
          <p class="p1">总成交额</p>
          <p class="p2"><span class="number">0</span>元</p>
          <p class="p3">昨日同时段0元</p>
        </div>
        <div class="business-item">
          <p class="p1">环比数据</p>
          <p class="p2"><span class="number">10%</span></p>
        </div>
        <div class="business-item">
          <p class="p1">项目点击量</p>
          <p class="p2"><span class="number">0</span>次</p>
          <p class="p3">昨日同时段0次</p>
        </div>
      </div>
    </el-card>
    <el-card class="order-detail" header="订单明细">
      <pf-table
        ref="pfTable"
        :columns="columns"
        :show-pagination="false"
        @get-table-data="getTableData"
      >
        <template #handle="{row}">
          <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        </template>
      </pf-table>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'account', attrs },
        { label: '订单内容', prop: 'roleName', attrs },
        { label: '订单总价', prop: 'userName', attrs },
        { label: '产生时间', prop: 'mobile', attrs },
        { label: '顾客联系方式', prop: 'sexStr', attrs },
        { label: '状态', slot: 'statusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '100px', fixed: 'right' }}
      ]
    }
  },
  created() {
  },

  methods: {
    getTableData({ ...formQuery }, done) {
      // this.loading = true
      // const data = {
      //   ...formQuery
      // }
      // getUserList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [], total: 0 })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/order/orderDetail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.business-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .business-item{
    padding: 20px 25px;
    width: 20%;
    height: 140px;
    background: #FDFDFD;
    border-radius: 2px;
    border: 1px solid #EBEBEB;
    line-height: 30px;
    font-size: 15px;
    .p1{
      color: $main-text;
    }
    .p2{
      color: #5988fd;
      .number{
        font-size: 30px;
        padding: 0 3px;
      }
    }
    .p3{
      color: $regular-text;
    }
  }
}
.order-detail{
  margin-top: 20px;
  min-height: 500px;
}
</style>
